<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Портфолио</title>
    <link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
    
    <header class="header slide">
        <nav>
            <div class="nav-left">
                <div class="logo">
                    <span class="first-name">Михаил</span>
                    <br>
                    <span class="last-name">Пудовкин</span>
                </div>
                <ul class="menu" id="menu">
                    <li><a href="#expertise" class="header-menu-link smooth-scrolling">Навыки</a></li>
                    <li><a href="#projects" class="header-menu-link smooth-scrolling">Проекты</a></li>
                    <li><a href="#" class="header-menu-link smooth-scrolling">Резюме</a></li>
                    <li><a href="#about" class="header-menu-link smooth-scrolling">Обо мне</a></li>
                </ul>
                <div id="toggle-button"><span></span></div>
            </div>
            <div class="button button-one nav-right"><a href="#contacts" class="smooth-scrolling">Контакты</a></div> 
        </nav>
        <div class="container header-contant">
            <div class="profession">//Full-stack Developer</div>
            <div class="slogan">
                Lorem ipsum <br> dolor sit amet_
            </div>
            <div class="header-name">Михаил Пудовкин</div>
            <div class="buttons-container">
                <div class="button button-two button-line">
                    <a href="#" class="">Резюме</a>
                </div>
                <div class="button button-one button-corner">
                    <a href="#contacts" class="smooth-scrolling">Контакты</a>
                </div>
            </div>
        </div>
        <div class="header-footer">
            <div class="empty"></div>
            <a href="#about" class="to-about smooth-scrolling">Обо мне <img src="assets/imgs/ChevronsLeftArrows.svg" alt="arrow" class="icon icon-arrow-down"></a>
            <div class="social-links">
                <a href="#" target="_blank">
                    <svg class="icon icon-social" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 
                        17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/>
                    </svg>
                </a>
                <a href="#" target="_blank">
                    <svg class="icon icon-social" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                        <g><path class="st0" d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   
                            c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   
                            c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   
                            c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   
                            c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   
                            c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   
                            C480,134.8,379.7,32,256,32z"/></g>
                    </svg>
                </a>
                <a href="#" target="_blank">
                    <svg class="icon icon-social" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                        <path d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 
                        16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 
                        0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 
                        0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 
                        22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 
                        7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 
                        42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 
                        46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 
                        72-101.3 79.4-135.6z"/>
                    </svg>
                </a>
            </div>
        </div>
    </header>
    <main>
        <div id="about" class="slide">
            <div class="about-container">
                <h2 class="about-title">
                    Привет, я <span class="accent-color">Михаил</span>
                </h2>
                <div class="about-text">
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                    Repellendus architecto accusantium dicta quia quibusdam aperiam 
                    velit mollitia voluptate quasi adipisci, dolores illum nostrum soluta, 
                    facilis illo. Est qui aliquam reprehenderit perferendis quae modi! Illum 
                    culpa sed quasi deserunt porro reiciendis odit rerum! Ea reiciendis veniam 
                    voluptate minus temporibus. Ad, autem?
                </div>
                <div class="button button-one"><a href="#" class="">Резюме</a></div> 
            </div>
        </div>
        <div id="expertise">
            <div class="container">
                <h2 class="title">Навыки_</h2>
                <div class="expertise-cards">
                    <a href="#" class="card color1">
                        <h3 class="card-title">Python</h3>
                        <div class="background-title">Python</div>
                        <div class="experiense">4 года</div>
                    </a>
                    <a href="#" class="card color2">
                        <h3 class="card-title">C++</h3>
                        <div class="background-title">C++</div>
                        <div class="experiense">1 год</div>
                    </a>
                    <a href="#" class="card color3">
                        <h3 class="card-title">C#</h3>
                        <div class="background-title">C#</div>
                        <div class="experiense">0.5 года</div>
                    </a>
                    <a href="#" class="card color4">
                        <h3 class="card-title">PHP</h3>
                        <div class="background-title">PHP</div>
                        <div class="experiense">3 года</div>
                    </a>
                    <a href="#" class="card color4">
                        <h3 class="card-title">Photoshop</h3>
                        <div class="background-title">Photoshop</div>
                        <div class="experiense">4 года</div>
                    </a>
                    <a href="#" class="card color3">
                        <h3 class="card-title">Linux</h3>
                        <div class="background-title">Linux</div>
                        <div class="experiense">2 года</div>
                    </a>
                    <a href="#" class="card color2">
                        <h3 class="card-title">Blender</h3>
                        <div class="background-title">Blender</div>
                        <div class="experiense">1 год</div>
                    </a>
                    <a href="#" class="card color1">
                        <h3 class="card-title">Менеджмент</h3>
                        <div class="background-title">Менеджмент</div>
                        <div class="experiense">1 год</div>
                    </a>
                </div>
            </div>
        </div>
        <div id="projects" class="">
            <div class="container">
                <h2 class="title">Проекты_</h2>
                <div class="projects-container">
                    <div class="projects">
                        <div class="project-card color1 active-project">
                            <div class="card-wrapper">
                                <h3 class="card-title">Calculator</h3>
                                <div class="card-expertise">C# WPF</div>
                            </div>
                        </div>
                        <div class="project-card color2">
                            <div class="card-wrapper">
                                <h3 class="card-title">Научный журнал</h3>
                                <div class="card-expertise">PHP Wordpress</div>
                            </div>
                        </div>
                        <div class="project-card color3">
                            <div class="card-wrapper">
                                <h3 class="card-title">Telegram бот</h3>
                                <div class="card-expertise">Python</div>
                            </div>
                        </div>
                        <div class="project-card color4">
                            <div class="card-wrapper">
                                <h3 class="card-title">Doworks</h3>
                                <div class="card-expertise">PHP</div>
                            </div>
                        </div>
                    </div>
                    <div class="project-view">
                        <div class="project-display" id="project-display">
                            <div class="project-name"><div id="project-name">Calculator</div></div>
                            <div class="project-discription">
                                <div  id="project-discription">
                                    Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
                                    Nemo, repellat facilis. Fugit possimus illo consequuntur alias vitae iure 
                                    deserunt asperiores tempora laudantium similique nisi velit, quaerat perspiciatis 
                                    unde quo praesentium soluta nostrum!
                                </div>
                                <div class="project-date">
                                    <span>Дата создания:</span>
                                    <span id="project-date">07/03/2023</span>
                                </div>
                            </div>
                            <div class="display-slider-button left"><img src="/assets/imgs/ChevronsLeftArrows.svg" alt="arrow"></div>
                            <div class="display-slider-button right"><img src="/assets/imgs/ChevronsLeftArrows.svg" alt="arrow"></div>
                        </div>
                        <div class="buttons">
                            <div class="button button-one button-line"><a href="#">Исходники</a></div>
                            <div class="button button-two button-corner"><a href="#">Открыть</a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer id="contacts" class="slide">
        <div class="container flex-container">
            <div class="left">
                <div class="slogan">Lorem ipsum dolor sit amet_</div>
                <a href="mailto:pudovkin306@mail.ru" class="email">pudovkin306@mail.ru</a>
                <a href="tel:" class="phone"></a>
                <div class="social-links">
                    <a href="#" target="_blank">
                        <svg class="icon icon-social" viewBox="0 0 448 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M446.7 98.6l-67.6 318.8c-5.1 22.5-18.4 28.1-37.3 
                            17.5l-103-75.9-49.7 47.8c-5.5 5.5-10.1 10.1-20.7 10.1l7.4-104.9 190.9-172.5c8.3-7.4-1.8-11.5-12.9-4.1L117.8 284 16.2 252.2c-22.1-6.9-22.5-22.1 4.6-32.7L418.2 66.4c18.4-6.9 34.5 4.1 28.5 32.2z"/>
                        </svg>
                    </a>
                    <a href="#" target="_blank">
                        <svg class="icon icon-social" style="enable-background:new 0 0 512 512;" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g><path class="st0" d="M256,32C132.3,32,32,134.8,32,261.7c0,101.5,64.2,187.5,153.2,217.9c11.2,2.1,15.3-5,15.3-11.1   
                                c0-5.5-0.2-19.9-0.3-39.1c-62.3,13.9-75.5-30.8-75.5-30.8c-10.2-26.5-24.9-33.6-24.9-33.6c-20.3-14.3,1.5-14,1.5-14   
                                c22.5,1.6,34.3,23.7,34.3,23.7c20,35.1,52.4,25,65.2,19.1c2-14.8,7.8-25,14.2-30.7c-49.7-5.8-102-25.5-102-113.5   
                                c0-25.1,8.7-45.6,23-61.6c-2.3-5.8-10-29.2,2.2-60.8c0,0,18.8-6.2,61.6,23.5c17.9-5.1,37-7.6,56.1-7.7c19,0.1,38.2,2.6,56.1,7.7   
                                c42.8-29.7,61.5-23.5,61.5-23.5c12.2,31.6,4.5,55,2.2,60.8c14.3,16.1,23,36.6,23,61.6c0,88.2-52.4,107.6-102.3,113.3   
                                c8,7.1,15.2,21.1,15.2,42.5c0,30.7-0.3,55.5-0.3,63c0,6.1,4,13.3,15.4,11C415.9,449.1,480,363.1,480,261.7   
                                C480,134.8,379.7,32,256,32z"/></g>
                        </svg>
                    </a>
                    <a href="#" target="_blank">
                        <svg class="icon icon-social" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg">
                            <path d="M545 117.7c3.7-12.5 0-21.7-17.8-21.7h-58.9c-15 0-21.9 7.9-25.6 
                            16.7 0 0-30 73.1-72.4 120.5-13.7 13.7-20 18.1-27.5 18.1-3.7 
                            0-9.4-4.4-9.4-16.9V117.7c0-15-4.2-21.7-16.6-21.7h-92.6c-9.4 
                            0-15 7-15 13.5 0 14.2 21.2 17.5 23.4 57.5v86.8c0 19-3.4 22.5-10.9 
                            22.5-20 0-68.6-73.4-97.4-157.4-5.8-16.3-11.5-22.9-26.6-22.9H38.8c-16.8 0-20.2 
                            7.9-20.2 16.7 0 15.6 20 93.1 93.1 195.5C160.4 378.1 229 416 291.4 416c37.5 0 
                            42.1-8.4 42.1-22.9 0-66.8-3.4-73.1 15.4-73.1 8.7 0 23.7 4.4 58.7 38.1 40 40 
                            46.6 57.9 69 57.9h58.9c16.8 0 25.3-8.4 20.4-25-11.2-34.9-86.9-106.7-90.3-111.5-8.7-11.2-6.2-16.2 0-26.2.1-.1 
                            72-101.3 79.4-135.6z"/>
                        </svg>
                    </a>
                </div>
                <div class="copyright">© Михаил Пудовкин</div>
                <div class="design-by">Design by <a href="https://github.com/jarred2" target="_blank">Jarred Fourie</a></div>
            </div>
            <form action="#" class="right" id="contact-form">
                <div class="field name-field">
                    <input type="text" name="contact-name" id="contact-name" required>
                    <span class="placeholder">Имя*</span>
                </div>
                <div class="field email-field">
                    <input type="email" name="contact-email" id="contact-email" required>
                    <span class="placeholder">Email*</span>
                </div>
                <div class="field message-field">
                    <textarea name="contact-email" id="contact-email" rows="5" required></textarea>
                    <span class="placeholder">Сообщение*</span>
                </div>
                <div class="mess-required-fields">
                    * — Обязательные поля
                </div>
                <div class="button button-one">
                    <a href="#">Отправить</a>
                </div>
            </form>
        </div>
    </footer>

    <script src="assets/js/scripts.js"></script>
</body>
</html>
